<template>
  <div>
    <!-- b端用户管理 审核通过/拒绝 -->
    <div>
      <el-form :inline="true" class="orderform">
        <el-row>
          <el-col :span="6">
            <el-form-item>
              <el-input style="width: 300px" placeholder="请输入..." v-model="tag" class="search_tag" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <span>B端用户状态:</span>
            <el-select v-model="select_value" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-form-item>
              <el-button type="primary" @click="btn_search()"><i class="el-icon-search"></i> 搜索</el-button>
              <el-button @click="btn_clear()"><i class="el-icon-remove-outline"></i> 重置</el-button>
            </el-form-item>
          </el-col>

        </el-row>

        <el-table
          :data="tableData"
          ref="multipleTable"
          :highlight-current-row="true"
          border>
          <el-table-column
            prop="id"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="account"
            label="帐号">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="电话">
          </el-table-column>
          <el-table-column
            prop="comment"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="actvied"
            label="状态"
            :formatter="statusformatter">
          </el-table-column>
          <el-table-column
            prop="create_date"
            label="创建日期"
            :formatter="dateformatter">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button @click="handleActivate(scope.row)" type="text">封号/解封</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="mydiv">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pageNo"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="totalDataNumber"
            class="table-pagination">
          </el-pagination>
        </div>
      </el-form>

      <!-- 点击删除按钮，删除确认框-->
      <el-dialog
        title="提示"
        :visible.sync="dialogFormVisible"
        width="30%">
        <span v-if="status === true">确定对选择用户进行 <b>封号</b> 处理? </span>
        <span v-if="status === false">确定对选择用户进行 <b>解封</b> 处理? </span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import moment from 'moment'

  export default {
    name: 'index',
    created() {
      this.btn_search()
    },
    data() {
      return {
        status: '',
        account: '',
        tag: '',
        select_value: '', // 客户状态
        options: [{
          value: '1',
          label: '正常'
        }, {
          value: '0',
          label: '已封号'
        }],
        allData: [], // 所有前端分页数据
        tableData: [], // 表格数据 仅展示当前页的数据
        pageNo: 1, // 当前页数
        totalDataNumber: 0, // 总记录数
        pageSize: 5,
        dialogFormVisible: false, // 封号/解封框
        formLabelWidth: '200px' // 弹出框form宽
      }
    },
    methods: {
      btn_search() {
        const vm = this
        axios.get(process.env.BASE_API + '/user/searchbuser', {
          params: {
            tag: this.tag,
            status: this.select_value
          }
        }).then(function(response) {
          var obj = response.data
          if (obj.code !== 10000) {
            vm.$message.error(obj.message)
            vm.totalDataNumber = 0
            vm.allData = []
            vm.tableData = []
          } else {
            // console.log(obj.data)
            vm.totalDataNumber = parseInt(obj.total)
            if (vm.totalDataNumber > 0) {
              vm.allData = obj.data
              vm.tableData = obj.data.slice(0, vm.pageSize)
            } else {
              vm.allData = []
              vm.tableData = []
            }
          }
        }).catch(function(error) {
          alert(error)
        })
      },
      btn_clear() {
        this.tag = ''
        this.select_value = ''
      },
      handleCurrentChange(val) {
        this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
      },
      handleActivate(row) {
        this.status = row.actvied
        this.account = row.account
        this.dialogFormVisible = true
      },
      handleCancel() {
        this.dialogFormVisible = false
      },
      handleSubmit() {
        var vm = this
        var params = new URLSearchParams()
        params.append('account', vm.account)
        if (vm.status === false) {
          params.append('activated', true)
        } else {
          params.append('activated', false)
        }
        axios.post(process.env.BASE_API + '/user/activatebuser', params).then(function(response) {
          var obj = response.data
          if (obj.code !== 10000) {
            vm.$message.error(obj.message)
          } else {
            vm.$message(obj.message)
            vm.btn_search()
          }
          vm.status = ''
          vm.openId = ''
        }).catch(function(error) {
          alert(error)
        })
        this.dialogFormVisible = false
      },
      dateformatter(row, column) {
        var date = row[column.property]
        if (date === undefined) {
          return ''
        }
        return moment(date).format('YYYY-MM-DD HH:mm')
      },
      statusformatter(row, column) {
        var value = row[column.property]
        // console.log(value)
        if (value === undefined) {
          return ''
        } else if (value === true) {
          return '正常'
        } else {
          return '已封号'
        }
      }
    }
  }
</script>

<style scoped>
  .orderform {
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .mydiv {
    float: right;
    margin-right: 10px;
  }
</style>
